<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <rect x="20" y="20" width="30" height="20" fill="#f00" >
            <animateTransform attributeName="transform"
                attributeType="XML"
                type="translate"
                from="0"
                to="10 10"
                dur="1s"
                fill="freeze"/>
        </rect>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <rect x="20" y="20" width="30" height="20" fill="#f00" >
            <animateTransform attributeName="transform"
                attributeType="XML"
                type="rotate(45)"
                from="0 35 30"
                to="45 35 30"
                dur="1s"
                fill="freeze"/>
        </rect>
    </svg>

    <svg width="400" height="400" viewBox="-50 -50 100 100">
        <rect x="-15" y="-10" width="30" height="20" fill="#f00" >
            <animateTransform attributeName="transform"
                attributeType="XML"
                type="rotate(45)"
                from="0"
                to="45"
                dur="1s"
                fill="freeze"/>
        </rect>
    </svg>

    <svg width="400" height="400" viewBox="-50 -50 100 100">
        <rect x="-15" y="-10" width="30" height="20" fill="#f00" >
            <animateTransform attributeName="transform"
                attributeType="XML"
                type="scale"
                from="1"
                to="2 1"
                dur="1s"
                fill="freeze"/>
        </rect>
    </svg>

    <svg width="400" height="400" viewBox="-50 -50 100 100">
        <rect x="-15" y="-10" width="30" height="20" fill="#f00" >
            <animateTransform attributeName="transform"
                attributeType="XML"
                type="skewX"
                from="0"
                to="30"
                dur="1s"
                fill="freeze"/>
        </rect>
    </svg>
    <svg width="400" height="400" viewBox="-50 -50 100 100">
        <rect x="0" y="0" width="30" height="20" fill="#f00" >
            <animateTransform attributeName="transform"
                attributeType="XML"
                type="skewX"
                from="0"
                to="30"
                dur="1s"
                fill="freeze"/>
        </rect>
    </svg>

    <svg width="400" height="400" viewBox="-50 -50 100 100">
        <rect x="-10" y="-10" width="20" height="20" fill="#f00" >
            <animateTransform id="a1" attributeName="transform"
                attributeType="XML"
                type="scale"
                from="1"
                to="2"
                dur="1s"
                fill="freeze"/>

            <animateTransform attributeName="transform"
                attributeType="XML"
                type="rotate"
                from="0"
                to="45"
                begin="a1.end"
                additive="sum"
                dur="1s"
                fill="freeze"/>    
        </rect>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <rect x="20" y="20" width="20" height="20" fill="#f00" >
            <animate attributeType="XML"
                attributeName="x"
                by="20"
                dur="1s"
                accumulate="sum"
                fill="freeze"
                repeatCount="3"/>
        </rect>
    </svg>


    <script src="index.js"></script>
  </body>
</html>
